<mat-toolbar class="wdl-sub-toolbar">
  <mat-toolbar-row style="height: 75px;">
    <div class="app-title">{{"alarmMgt" | translate}}</div>

    <span class="header-spacer"></span>

    <button *ngIf="enableRefresh" mat-icon-button (click)="stop()" style="margin-right: 10px;" matTooltip="{{'stop' | translate}}">
      <mat-icon svgIcon="stop" style="color: darkred;"></mat-icon>
    </button>
    <button *ngIf="!enableRefresh" mat-icon-button (click)="resume()" style="margin-right: 10px;" matTooltip="{{'resume' | translate}}">
      <mat-icon svgIcon="resume" style="color: darkgreen;"></mat-icon>
    </button>

    <button mat-icon-button (click)="export()" style="margin-right: 10px;" matTooltip="{{'export' | translate}}">
      <mat-icon svgIcon="export" style="color: darkblue;"></mat-icon>
    </button>

    <mat-form-field style="width: 200px;margin-right: 20px;font-size: 1rem;">
      <input matInput [matDatepicker]="fromtime" (dateChange)="fromChange($event)" placeholder="{{'alarmStartDate' | translate}}">
      <mat-datepicker-toggle matSuffix [for]="fromtime"></mat-datepicker-toggle>
      <mat-datepicker #fromtime></mat-datepicker>
    </mat-form-field>

    <mat-form-field style="width: 200px;margin-right: 20px;font-size: 1rem;">
      <input matInput [matDatepicker]="totime"  (dateChange)="toChange($event)" placeholder="{{'alarmEndDate' | translate}}">
      <mat-datepicker-toggle matSuffix [for]="totime"></mat-datepicker-toggle>
      <mat-datepicker #totime></mat-datepicker>
    </mat-form-field>

    <div class="input-group" style="width: 280px !important;">
      <input type="text" [(ngModel)]="searchText" class="form-control" matTooltip="{{'searchAlarm' | translate}}" placeholder="{{'searchAlarm' | translate}}">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary" type="button" id="button-addon1" (click)="refreshSearch()" matTooltip="{{'refreshSearch' | translate}}">
          <mat-icon svgIcon="search" class="hst-color"></mat-icon>
        </button>
      </div>
    </div>
  </mat-toolbar-row>
</mat-toolbar>

<div class="wdl-container mat-elevation-z8">
  <div class="wdl-loading-shade" *ngIf="isLoadingResults">
    <mat-spinner *ngIf="isLoadingResults"></mat-spinner>
  </div>

  <div class="wdl-table-container wdl-table-container-page">
    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8"
     matSort matSortActive="raisedTime" matSortDirection="desc">
      <ng-container matColumnDef="number">
        <th mat-header-cell *matHeaderCellDef>{{"number" | translate}}</th>
        <td mat-cell *matCellDef="let element">{{element.number}}</td>
      </ng-container>

      <ng-container matColumnDef="raisedTime">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{"raisedTime" | translate}}</th>
        <td mat-cell *matCellDef="let element">{{(element.raisedTime === 0) ? '-' :  (element.raisedTime | date: 'yyyy-MM-dd HH:mm:ss')}}</td>
      </ng-container>

      <ng-container matColumnDef="type">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{"alarmType" | translate}}</th>
        <td mat-cell *matCellDef="let element">{{element.type | translate}} </td>
      </ng-container>

      <ng-container matColumnDef="ackedTime">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{"ackedTime" | translate}}</th>
        <td mat-cell *matCellDef="let element">{{(element.ackedTime === 0) ? '-' :  (element.ackedTime | date: 'yyyy-MM-dd HH:mm:ss')}}</td>
      </ng-container>

      <ng-container matColumnDef="personName">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{"alarmPerson" | translate}}</th>
        <td mat-cell *matCellDef="let element">
          <div style="cursor: pointer;" (click)="setFilterPerson(element)" matTooltip="{{'filterPerson' | translate}}">{{element.personName}}</div>
        </td>
      </ng-container>

      <ng-container matColumnDef="deviceId">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{"alarmDevice" | translate}}</th>
        <td mat-cell *matCellDef="let element">{{element.deviceId}} </td>
      </ng-container>

      <ng-container matColumnDef="actions" *ngIf="isUserQualified()" stickyEnd>
        <th mat-header-cell *matHeaderCellDef></th>
        <td mat-cell *matCellDef="let element">
          <button *ngIf="element.ackedTime === 0" mat-icon-button (click)="ack(element)" matTooltip="{{'ack' | translate}}">
            <mat-icon svgIcon="ack" style="color: darkblue;"></mat-icon>
          </button>
          <!--
          <button *ngIf="element.ackedTime > 0" mat-icon-button (click)="unack(element)" matTooltip="{{'unack' | translate}}">
            <mat-icon svgIcon="unack" style="color: darkred;"></mat-icon>
          </button>
          <button mat-icon-button (click)="remove(element)" matTooltip="{{'remove' | translate}}">
            <mat-icon svgIcon="delete" style="color: darkred;"></mat-icon>
          </button>
          -->
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
  </div>

  <mat-paginator
   [length]="resultsLength"
   [pageSize]="pageSize"
   [showFirstLastButtons]="true"
   [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>
